<template>
  <el-container class="common-container-wrapper">
    <el-header>
      <el-page-header class="head-info" @back="goBack">
        <template v-slot:content>
          <div class="content-info">
            <h3>低代码设计平台</h3>
            <div class="save-btn" @click="saveLayout">保存</div>
          </div>
        </template>
      </el-page-header>
    </el-header>
    <el-container>
      <el-aside width="100px">
        <component-library-module></component-library-module>
      </el-aside>
      <el-container>
        <el-main>
          <layout-infomation-module></layout-infomation-module>
        </el-main>
      </el-container>
      <el-aside width="320px" class="parmas-aslide-box">
        <component-parameter-module></component-parameter-module>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
  ComponentLibraryModule,
  ComponentParameterModule,
  LayoutInfomationModule,
} from "@/layout/index";
import { useMainStore } from "@/store";
import { $http } from "@/util/ajax";
import { ElNotification } from "element-plus";
export default defineComponent({
  components: {
    ComponentLibraryModule,
    ComponentParameterModule,
    LayoutInfomationModule,
  },
  setup() {
    const goBack = () => {
      console.log("go back");
    };
    const store = useMainStore();
    const saveLayout = () => {
      $http
        .post("/layout/add", {
          layoutDesign: store.componentsInfomation,
          layoutName: "测试框架",
        })
        .then((res) => {
          ElNotification({
            title: "访问地址",
            message: `http://${window.location.host}/show/${res.data.layoutId}`,
          });
          // 这里的res.data.layoutId
          // 访问地址: http://localhost:3000/show/:id 查看页面
        });
    };

    return {
      goBack,
      saveLayout,
    };
  },
});
</script>

<style lang="scss" scoped>
.common-container-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    line-height: 60px;
  }

  .el-aside {
    user-select: none;
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
  }

  .el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
  }

  .head-info {
    line-height: inherit;

    .el-page-header__content {
      width: 100%;
    }

    .content-info {
      width: 90vw;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .save-btn {
        cursor: pointer;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 8px;
        font-weight: 500;
        color: rgb(85, 73, 73);
        border: 2px solid rgb(39, 34, 34);
      }
    }
  }

  .parmas-aslide-box {
    height: calc(100vh - 60px);
    overflow: auto;
    /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    overflow: -moz-scrollbars-none;
    //谷歌适用
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
